// 1.0 定义个书籍数组
let books = ["Dom编程艺术", "React深入浅出", "Vue"];

// 循环遍历生成jsx的注意点
/* 
1. map() 的箭头函数中的方法体要使用小括号包裹jsx，使用{}会报错
2. map()方法循环生成的元素中一定要加上key,给react做优化处理的
*/

function JSX2() {
  return (
    // <div>
    //   <ul>
    //     <li>Dom编程艺术</li>
    //     <li>React深入浅出</li>
    //   </ul>
    // </div>
    <div>
      <ul>
        {/* 调用数组的map方法进行li标签的循环遍历生成 */}
        {books.map((item) => (
          //  将item这个元素通过li标签展示在页面中
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default JSX2;
